<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文件检索</title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<style>
			body {
				font-size: 16px;
				text-align: center;
				background-color: #f5f5f5;
				margin: 0;
				padding: 0;
			}
			
			.app-container{
				width: 1200px;
				margin: 0 auto;
				background-color: #fff;
				min-height: 100vh;
			}

			.header {
				text-align: center;
				padding: 30px 0;
				color: #409EFF;
				font-size: 30px;
			}

			.form {
				margin: 30px auto;
				width: 500px;
			}
			
			.tips{
				text-align: left;
				padding: 40px;
				font-size: 16px;
				line-height: 28px;
			}
		</style>
	</head>
	<body>
		<div id="app" class="app-container">
			<div class="header">
				<h2>文件检索小工具</h2>
			</div>
			<div class="form">
				<el-form ref="form" :model="form" :rules="ruleForm" label-width="100px">
					<el-form-item label="文件名" prop="fileName">
						<el-input v-model="form.fileName" placeholder="请输入需要移动的文件名，以空格隔开">
					</el-form-item>
					<el-form-item label="原路径" prop="oldPath">
						<el-input v-model="form.oldPath" placeholder="请输入原文件所在路径"></el-input>
					</el-form-item>
					<el-form-item label="目标路径" prop="newPath">
						<el-input v-model="form.newPath" placeholder="请输入需要移动到的文件夹路径"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<div class="btn-box">
				<el-button type="primary" @click="setPath" round>开始检索</el-button>
			</div>
			<div class="tips">
				<div class="title">注意事项：</div>
				<div class="tips-item">1、该系统所做操作皆为移动指定文件，并非复制，请提前做好文件备份</div>
				<div class="tips-item">2、文件名可以直接复制excel表格中的相关数据，粘贴到输入框中，文件名则自动以空格隔开</div>
				<div class="tips-item">3、文件名自动识别是否带"sub"前缀并补充，带不带都行</div>
				<div class="tips-item">4、路径指的是文件夹所在位置，可进入文件夹后直接复制地址栏</div>
			</div>
		</div>
	</body>
	<script src="./js/jquery.min.js"></script>
	<script src="./js/vue.js"></script>
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script>
		new Vue({
			el: '#app',
			data: function() {
				return {
					form: {
						fileName: '',
						oldPath: '',
						newPath: '',
					},
					ruleForm: {
						fileName: [
							{ required: true, message: '请输入文件名', trigger: 'blur' }
						],
						oldPath: [
							{ required: true, message: '请输入原文件所在路径', trigger: 'blur' }
						],
						newPath: [
							{ required: true, message: '请输入需要移动到的文件夹路径', trigger: 'blur' }
						],
					}
				}
			},
			methods:{
				setPath(){
					this.$refs.form.validate((valid) => {
						if(valid){
							let params = {
								fileName: this.formatFileName(this.form.fileName),
								oldPath: this.form.oldPath,
								newPath: this.form.newPath,
							}
							let _this = this;
							$.ajax({
								url: '/setPath',
								type: 'POST',
								data: JSON.stringify(params),
								processData: true,
								dataType: "json",
								contentType: "application/json; charset=utf-8",
								success: function(res) {
									if(res.data.length){
										let resStr = res.data.join('，')
										_this.$alert('操作失败的文件名：' + resStr, res.msg, {
											confirmButtonText: '确定',
										});
									}else{
										_this.$message({
											message: res.msg,
											type: 'success'
										});
									}
								},
								error: function(err){
									_this.$alert('操作失败', res.msg, {
										confirmButtonText: '确定',
									});
								}
							})
						}else{
							return false
						}
					})
					
				},
				formatFileName(oldStr){
					if(oldStr){
						let newStr = oldStr.replace(/ /g,',')
						return newStr
					}else{
						
					}
				},
			}
		})
	</script>
</html>
